<template>
    <div v-show="showAddress.id" class="lbs" v-if="shopList.length>0">
        <el-amap vid="amap" :amap-manager="amapManager" :plugin="plugin" :zoom="15" class="amap"></el-amap>

        <!-- <div class="toolbar navigation-map" v-if="currentNavgation">
            <ul>
                <li @click="getDriving" :class="currentNavgationType==1?'active':null">
                    <i class="iconfont icon-Driving"></i> 驾车
                </li>
                <li @click="transfer" :class="currentNavgationType==2?'active':null">
                    <i class="iconfont icon-Transfer"></i> 公交
                </li>
                <li @click="walking" :class="currentNavgationType==3?'active':null">
                    <i class="iconfont icon-Walking"></i> 步行
                </li>
            </ul>
        </div> -->
        <div class="toolbar address-map">
            <!-- {{showAddress}} -->
            <p class="name">{{showAddress.name}}</p>
            <p class="address">{{showAddress.location}}</p>
            <p class="tel">
                <span v-for="(c,i) in showAddress.contacts" :key="i">{{c.phone}}<nobr v-if="i!=showAddress.contacts.length-1"> / </nobr></span>
            </p>

            <div class="be-away">
                <p>距离目的地</p>
                <b class="unit" v-if="showAddress.distance">{{showAddress.distance.toFixed(0) | fomatDistance('EN')}}</b>

                <a class="driving" :href="'http://gaode.com/dir?from[lnglat]='+current
                +'&from[name]=初始位置&to[lnglat]='+center+'&to[name]='
                +showAddress.location+'=&type=car'">
                    <i class="iconfont icon-arrow-drive"></i>
                </a>
                <!-- <span class="driving" @click="getDriving()">
                    <i class="iconfont icon-arrow-drive"></i>
                </span> -->
            </div>
        </div>
    </div>
</template>
<script>
import { AMapManager } from 'vue-amap';
import { getStoreList, recordMarketingData } from '@/api/marketing.js'

var compare = function (p) { //这是比较函数
    return function (m, n) {
        var a = m[p];
        var b = n[p];
        return a - b; //升序
    }
}
export default {
    data() {
        const self = this;
        return {
            amapManager: new AMapManager(),
            // AMapDriving: new AMapDriving(),
            center: [],
            current: [],
            lng: 0,
            lat: 0,
            loaded: false,
            currentNavgation: true,
            currentNavgationType: 1,
            plugin: [
                // 'ToolBar',
                {
                    enableHighAccuracy: true,//是否使用高精度定位，默认:true
                    timeout: 100,          //超过10秒后停止定位，默认：无穷大
                    maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                    convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                    showButton: true,        //显示定位按钮，默认：true
                    buttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角
                    showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                    showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                    panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                    zoomToAccuracy: true,//定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
                    extensions: 'all',
                    pName: 'Geolocation',
                    events: {
                        init(o) {
                            // o 是高德地图定位插件实例
                            o.getCurrentPosition((status, result) => {
                                if (result && result.position) {
                                    self.lng = result.position.lng;
                                    self.lat = result.position.lat;
                                    self.loaded = true;
                                    self.current = [self.lng, self.lat]
                                    let showAddress
                                    // 根据定位以及目的地坐标计算最近地点
                                    self.shopList.forEach((e, i) => {
                                        let a = AMap.GeometryUtil.distance([e.longitude, e.latitude], self.current)
                                        self.$set(self.shopList[i], 'distance', a)
                                        if (e.contacts) {
                                            self.$set(self.shopList[i], 'contacts', JSON.parse(e.contacts))
                                        }
                                    });

                                    showAddress = self.shopList.sort(compare("distance"));
                                    self.showAddress = showAddress[0]
                                    self.center = [self.showAddress.longitude, self.showAddress.latitude]
                                    self.$nextTick();
                                    document.title = self.showAddress.name
                                    // 记录到店数据
                                    recordMarketingData(self.$route.query.source, self.showAddress.id, 1, self.$route.query.shareUserId).then(resp => {
                                    }).catch(_ => { })
                                }
                            });

                        }
                    }
                },
            ],

            shopList: [],
            distance: null,
            showAddress: {}
        }
    },
    components: {

    },
    mounted() {
        let timer = setInterval(() => {
            console.log(this.showAddress.id)
            if (this.showAddress.id) {
                var MarkerOptions = {
                    map: this.amapManager._map,
                    position: this.center
                }
                this.amapManager.getMap().setCenter(this.center)
                this.amapManager.getMap().setZoom(15)
                var marker = new AMap.Marker(MarkerOptions);
                console.log(marker)
                clearInterval(timer)
            }
        }, 500)

    },
    methods: {
        // getDriving() {
        //     // console.log(this.amapManager._map);
        //     var drivingOption = {
        //         policy: AMap.DrivingPolicy.LEAST_TIME,
        //         map: this.amapManager._map
        //     };
        //     var driving = new AMap.Driving(drivingOption); //构造驾车导航类

        //     let startLngLat = this.center
        //     let self = this
        //     driving.search(startLngLat, [this.showAddress.longitude, this.showAddress.latitude], function (status, result) {
        //         // 未出错时，result即是对应的路线规划方案
        //         console.log(result)
        //         self.currentNavgation = true
        //         self.currentNavgationType = 1
        //     })
        // },
        // transfer() {
        //     var transferOption = {
        //         policy: AMap.TransferPolicy.LEAST_TIME,
        //         map: this.amapManager._map,
        //         city: this.showAddress.city == '市辖区' ? this.showAddress.province : this.showAddress.city
        //     };
        //     console.log(transferOption)
        //     var transfer = new AMap.Transfer(transferOption); //构造驾车导航类
        //     let startLngLat = this.center
        //     let self = this
        //     transfer.search(new AMap.LngLat(startLngLat[0], startLngLat[1]), new AMap.LngLat(this.showAddress.longitude, this.showAddress.latitude), function (status, result) {
        //         // 未出错时，result即是对应的路线规划方案
        //         console.log(result)
        //         self.currentNavgationType = 2
        //     })
        // },
        // walking() {
        //     var walkingOption = {
        //         // policy: AMap.TransferPolicy.LEAST_TIME,
        //         map: this.amapManager._map
        //     };
        //     var walking = new AMap.Walking(walkingOption); //构造驾车导航类
        //     let startLngLat = this.center
        //     let self = this
        //     walking.search(startLngLat, [this.showAddress.longitude, this.showAddress.latitude], function (status, result) {
        //         // 未出错时，result即是对应的路线规划方案
        //         console.log(result)
        //         self.currentNavgationType = 3
        //     })
        // },
    },
    created() {
        getStoreList().then(resp => {
            this.shopList = resp.list
        }).catch(_ => { })
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.lbs {
    height: calc(100vh - 2rem);
}
.amap {
    width: 100%;
    height: calc(100% - 4.2rem);
}
.address-map {
    height: 4.2rem;
    position: fixed;
    bottom: 0;
    background: #333;
    width: 100%;
    color: #fff;
    font-size: 0.625rem;
    padding: 0.5rem 0.5rem 1rem;
    .name {
        padding-bottom: 0.2rem;
    }
    .address {
        font-size: 0.56rem;
        color: #a0a0a0;
        margin-bottom: 0.5rem;
    }
    .be-away {
        position: absolute;
        right: 0.5rem;
        top: 0.5rem;
        p {
            font-size: 0.56rem;
            color: #a0a0a0;
        }
    }
    .driving {
        display: block;
        position: relative;
        top: 0.4rem;
        .iconfont {
            color: #ffc107;
            font-size: 24px;
        }
    }
}

.navigation-map {
    position: absolute;
    top: 2rem;
    z-index: 999;
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    background: #f2f4f6;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
    ul {
        display: flex;
        li {
            flex: 1;
            text-align: center;
            .iconfont {
                font-size: 20px;
                position: relative;
                top: 0.08rem;
                left: -2px;
            }
        }
        .active {
            color: #2d95ff;
        }
    }
}
</style>
